<template>
	<div class="myNumber">
		<div class="add" @click="inputValue++">
			<div></div>
			<div></div>
		</div>
		<input @change="changeInput"  type="number" class="input" v-model="inputValue">
		<div class="subtract" :class="{'disabled':value<=min}" @click="inputValue--">
			<div>

			</div>
		</div>
	</div>
</template>
<script setup>
import {ref,watch,computed} from "vue"
const emit=defineEmits(["input"])
const Props=defineProps({
	min:{
		default:0,
		type:Number
	},
	max:{
		default:100,
		type:Number
	},
	value:{
		default:0,
		type:Number
	}
})
// computed(()=>{
// 	return Props.value
// })
const inputValue=ref(Props.value)
function changeInput(newValue,oldValue){
	console.log("newValue:",newValue);
	// if(newValue===""||isNaN(newValue)){
	// 	emit("input",0)
	// 	inputValue.value=0
	// }
}
// watch(()=>inputValue.value,(newValue,oldValue)=>{
// 	console.log("newValue:",newValue);
// 	if(newValue===""||isNaN(newValue)){
// 		emit("input",0)
// 		inputValue.value=0
// 	}
// })
</script>
<style scoped>
.myNumber{
	--size:1px;
	--len:0.6em;
}
.myNumber{
    border: 1px solid #dcdfe6;
	display: flex;
	flex-direction: row;
	width: 6em;
	border-radius: 5px;
	overflow: hidden;
}
.input{
	color:#000000;
	width: 4em;
	border: none;
	text-align: center;
}
.add{
    border-right: 1px solid #dcdfe6;
}
.add,.subtract{
	width: 2em;
	position: relative;
	background: #f5f7fa;
}
.add,.subtract,.input{
	padding: 0;
	font-size:12px;
	height: 2em;
}
.add div{
	position:absolute;
	width:var(--size);
	height:var(--len);
    background-color: #85878b;
}
.add div:nth-child(1){
	top: 50%;
	right: 50%;
	transform: translateY(-50%);
}
.add div:nth-child(2){
	transform: translateY(50%) rotate(90deg);
    bottom: 50%;
    right: 50%;
}
.subtract{
    border-left: 1px solid #dcdfe6;
	display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}
.subtract div{
	width:var(--len);
	height:var(--size);
	background-color: #85878b;
}
.myNumber:hover {
	border-color: #409eff;
}
.input{
	outline: 0;
}
.disabled{
	pointer-events: none;
}
.disabled div{
	background-color: #ced2d8;
	pointer-events: none;
}
</style>